<template>
  <div class="left-chart-1">
    <div class="charts">
      <div class="lc2-chart">
        <CustomChart v-if="option1.xAxis.data.length" :option="option1" />
        <div class="title">
          <i class="item" style="background: #91cc75"></i>得胚率(%)
          <i class="item" style="background: #ee6666"></i>损耗率(%)
        </div>
      </div>
      <div class="lc2-chart">
        <CustomChart v-if="option2.xAxis.data.length" :option="option2" />
        <div class="title">开机率(%)</div>
      </div>
      <div class="lc2-chart">
        <CustomChart v-if="option3.xAxis.data.length" :option="option3" />
        <div class="title">故障率(%)</div>
      </div>
    </div>
    <div
      v-if="
        !option1.xAxis.data.length &&
        !option2.xAxis.data.length &&
        !option3.xAxis.data.length
      "
      class="no-data"
    >
      暂无数据
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { queryConsumptionInfo } from "@/api/dashboard/injectionWorkshop";
const lineLabelColor = "#ffffffeb";
export default {
  name: "LeftChart2",
  components: { CustomChart },
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      option1: {
        color: ["#91cc75", "#ee6666"],
        grid: {
          top: 20,
          bottom: 25,
          left: 35,
          right: 28,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          show: false,
          data: [
            {
              name: "得胚率",
            },
            {
              name: "损耗率",
            },
          ],
          textStyle: {
            color: lineLabelColor,
          },
          itemWidth: 15,
          itemHeight: 15,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            max: 100,
            minInterval: 0.2,
          },
        ],
        series: [
          {
            name: "得胚率",
            data: [],
            type: "bar",
            markLine: {
              symbol: [],
              lineStyle: {
                type: "solid",
                width: 1,
                color: "#5470c6",
              },
              data: [
                {
                  name: "标准线",
                  yAxis: 0,
                },
              ],
            },
            label: {
              show: true,
              fontSize: 11,
              position: "insideTop",
              color: lineLabelColor,
              formatter(param) {
                return param.value || "";
              },
            },
            barWidth: "67%",
            stack: "stack",
            yAxisIndex: 0,
          },
          {
            name: "损耗率",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
            },
            barWidth: "67%",
            stack: "stack",
            yAxisIndex: 0,
          },
        ],
      },
      option2: {
        color: ["#5470c6"],
        grid: {
          top: 20,
          bottom: 25,
          left: 35,
          right: 28,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          show: false,
          data: [
            {
              name: "开机率",
            },
          ],
          textStyle: {
            color: lineLabelColor,
          },
          itemWidth: 15,
          itemHeight: 15,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            max: 100,
            minInterval: 0.2,
          },
        ],
        series: [
          {
            name: "开机率",
            data: [],
            type: "bar",
            markLine: {
              symbol: [],
              lineStyle: {
                type: "solid",
                width: 1,
                color: "#5470c6",
              },
              data: [
                {
                  name: "标准线",
                  yAxis: 0,
                },
              ],
            },
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
            },
            barWidth: "60%",
            // stack: "stack",
            yAxisIndex: 0,
          },
        ],
      },
      option3: {
        color: ["#fac858"],
        grid: {
          top: 20,
          bottom: 25,
          left: 35,
          right: 28,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          show: false,
          data: [
            {
              name: "故障率",
            },
          ],
          textStyle: {
            color: lineLabelColor,
          },
          itemWidth: 15,
          itemHeight: 15,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            max: 100,
            minInterval: 0.01,
          },
        ],
        series: [
          {
            name: "故障率",
            data: [],
            type: "bar",
            markLine: {
              symbol: [],
              lineStyle: {
                type: "solid",
                width: 1,
                color: "#5470c6",
              },
              data: [
                {
                  name: "标准线",
                  yAxis: 0,
                },
              ],
            },
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
            },
            barWidth: "60%",
            // stack: "stack",
            yAxisIndex: 0,
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.workshopItem?.value) {
        return;
      }

      let data1 = [];
      let data2 = [];
      try {
        const ress = await Promise.all([
          queryConsumptionInfo({
            workshopId: this.workshopItem.value,
            phasor: "embryo",
          }),
          queryConsumptionInfo({
            workshopId: this.workshopItem.value,
            phasor: "powerOn",
          }),
        ]);
        data1 = ress[0].data;
        data2 = ress[1].data;
      } catch (error) {
        data1 = [];
        data2 = [];
      }
      this.formatter1(data1.consumptionInfoList, data1.goal);
      this.formatter2(data2.consumptionInfoList, data2.goal);
    },
    formatter1(data, goal) {
      const xAxisData = [];
      const seriesData1 = [];
      const seriesData2 = [];
      if (data?.length) {
        for (let i = 0; i < data.length; i++) {
          const ele = data[i];
          xAxisData.push(ele.lineName);
          seriesData1.push(ele.consumption);
          if (ele.consumption) {
            seriesData2.push(this.toFix(100 - ele.consumption, 2));
          } else {
            seriesData2.push(0);
          }
        }
      }
      this.option1.xAxis.data = xAxisData;
      this.option1.series[0].data = seriesData1;
      this.option1.series[0].markLine.data[0].yAxis = goal;
      this.option1.series[1].data = seriesData2;
    },
    formatter2(data, goal) {
      const xAxisData = [];
      const seriesData1 = [];
      const seriesData2 = [];
      if (data?.length) {
        for (let i = 0; i < data.length; i++) {
          const ele = data[i];
          xAxisData.push(ele.lineName);
          seriesData1.push(ele.consumption);
          if (ele.consumption) {
            seriesData2.push(this.toFix(100 - ele.consumption, 2));
          } else {
            seriesData2.push(0);
          }
        }
      }
      this.option2.xAxis.data = xAxisData;
      this.option2.series[0].data = seriesData1;
      this.option2.series[0].markLine.data[0].yAxis = goal;

      this.option3.xAxis.data = xAxisData;
      this.option3.series[0].data = seriesData2;
      this.option3.series[0].markLine.data[0].yAxis = goal;
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 42px;
  .charts {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    gap: 8px;
  }
  .lc2-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .chart {
      flex: 1;
    }
    .title {
      font-size: 12px;
    }
    .item {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 2px;
      border-radius: 2px;
    }
  }
  .legend {
    text-align: center;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    .item {
      i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
      }
    }
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
